<template>
  <div>
    <mt-header class="plain" title="选择地区" fixed>
      <mt-button icon="back" slot="left" @click="goBack()">返回</mt-button>
      <mt-button slot="right" @click="save()">确定</mt-button>
    </mt-header>
    <div class="info-container">
      <div class="regionorder-title">
        <div v-if="sheng" :class="{active:currentType=='sheng'}" @click="setCurrentType('sheng')">{{sheng}}</div>
        <div v-if="shi" :class="{active:currentType=='shi'}" @click="setCurrentType('shi')">{{shi}}</div>
        <div v-if="qu" :class="{active:currentType=='qu'}" @click="setCurrentType('qu')">{{qu}}</div>
      </div>
      <div class="region-list" style="height:100">
        <div v-for="item in regionList" :key="item.order">
          <div :class="{active:currentItem==item.order}" @click="selectRegion(item)">{{item.name}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import treeView from '@/components/tree'
import {
  Toast
} from 'mint-ui'
import {
  Const
} from '@/consts'
import schoolApi from '@/api/school'
import utils from '@/utils'

export default {
  data () {
    return {
      currentItem: '',
      sheng: '请选择',
      shi: false,
      qu: false,
      currentType: 'sheng',
      shengList: [],
      shiList: [],
      quList: [],
      dataList: [],
      data: [],
      selected: null,
      initNodeValue: null
    }
  },

  created () {
    this.initNodeValue = utils.get('POSITION')
    this.selected = this.initNodeValue
    this.getRegions()
  },
  computed: {
    regionList () {
      if (this.currentType === 'sheng') {
        return this.shengList
      } else if (this.currentType === 'shi') {
        return this.shiList
      } else if (this.currentType === 'qu') {
        return this.quList
      }
    }
  },
  components: {
    treeView
  },

  methods: {
    itemClicked ($event) {
      if (!$event.isParent) {
        this.selected = $event.data.order
      }
    },
    setCurrentType (type) {
      scrollTo(0, 0)
      if (type === 'sheng') {
        this.shi = false
        this.qu = false
        this.currentType = type
      } else if (type === 'shi') {
        this.qu = false
        this.currentType = type
      } else if (type === 'qu') {
        this.currentType = type
      }
    },
    selectRegion (e) {
      scrollTo(0, 0)
      this.currentItem = e.order
      if (this.currentType === 'sheng') {
        this.sheng = e.name
        this.shi = '请选择'
        this.currentType = 'shi'
        this.shiList = e.subregions
      } else if (this.currentType === 'shi') {
        this.shi = e.name
        if (e.subregions && e.subregions.length > 0) {
          this.qu = '请选择'
          this.currentType = 'qu'
          this.quList = e.subregions
        } else {
          this.selected = e.order
        }
      } else if (this.currentType === 'qu') {
        this.qu = e.name
        this.selected = e.order
      }
      console.log(e)
    },
    getRegions () {
      schoolApi.getRegions().then(resp => {
        const result = resp[Const.RESP_RESULT] || [];

        this.data = result
        this.shengList = result
      }).catch(resp => {
        if (resp.statusCode == '200') {
          Toast(resp[Const.RESP_MESSAGE] || '获取信息失败');
        }
      })
    },

    goBack () {
      this.$router.replace({
        path: '/personal/school/list'
      })
    },

    save () {
      this.$router.replace({
        path: '/personal/school/list',
        query: {
          order: this.selected
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.info-container {
  margin-top: 55px;
  margin-left: 16px;
  margin-right: 16px;
  .regionorder-title {
    background-color: #fff;
    position: fixed;
    top: 50px;
    display: flex;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid #eeeeee;
    div {
      padding-left: 20px;
      padding-right: 20px;
    }
    .active {
      color: #fe4343;
      border-bottom: 3px solid #fe4343;
    }
  }
  .region-list {
    margin-top: 100px;
    font-size: 16px;
    text-align: left;
    .active {
      color: #fe4343;
    }
    div {
      line-height: 40px;
    }
  }
}
</style>

